<template>
	<!-- 我不想用组件写法了 -->
	<div class="container">
		<!-- 用户信息，地址，姓名等 -->
		<div class="container-header arrow">
			<div>
				<img src="../../assets/icon/shop-icon/address-icon.png" />
				<div>
					<p>
						<span>收货人：</span>
						<span>王小二</span>
						<span>13777777777</span>
					</p>
					<p>
						<span>收货地址：</span>
						<span>浙江省温州市乐清市城南街道33号</span>
					</p>
				</div>
			</div>
		</div>
		<div style="width: 100vw;height: .3rem;background: #F5F5F5;"></div>
		<!-- 用户购买的商品信息 -->
		<div class="container-content">
			<div>
				<img src="http://img1.imgtn.bdimg.com/it/u=2376037436,1385756909&fm=26&gp=0.jpg" />
			</div>
			<div>
				<p>多功能垃圾回收箱</p>
				<p>
					<span>￥</span>
					<span>1999.00</span>
				</p>
			</div>
		</div>
		<!-- 底部购买版块 -->
		<div>
			<div style="height: 1rem;"></div>
			<div class="shop-buy-foot">
				<div>
					<span>需支付：</span>
					<span>￥</span>
					<span>1999.00</span>
				</div>
				<div @click="buyModalFlag = true">提交订单</div>
			</div>
		</div>
		<!-- 遮罩层 -->
		<div class="mask" v-show="buyModalFlag"></div>
		<!-- 最底部弹出购买页面 -->
		<transition @before-enter="beforeEnter" @enter="enter" @beforeLeave="beforeLeave">
			<div v-show="buyModalFlag" class="foot-buy-modal">
				<div class="header-modal">
					<span>付款 &nbsp;<span class="time">25:44</span></span>
				</div>
				<img @click="close" class="close" src="../../assets/icon/shop-icon/close.png" />
				<!-- 支付购买方式 -->
				<div class="pay-buy">
					<!-- 支付宝支付 -->
					<div class="alipay-buy" @click="alipayBuyFunc">
						<div :class="[buyMode === true ? 'buy-select' : 'buy-no-select']">
						</div>
						<img src="../../assets/icon/shop-icon/zhifubao.png" />
						<span>支付宝支付</span>
					</div>
					<hr style="height: .02rem;margin-left: .96rem;" />
					<!-- 微信支付 -->
					<div class="alipay-buy" @click="wechatBuy">
						<div :class="[buyMode !== true ? 'buy-select' : 'buy-no-select']">
						</div>
						<img src="../../assets/icon/shop-icon/weixinzhifu.png" />
						<span>微信支付</span>
					</div>
				</div>
				<hr style="height: 2.36rem;" />
				<!-- 点击支付 -->
				<div class="go-buy">
					<p>
						<span>支付</span>
						<span>￥</span>
						<span>1999.00</span>
					</p>
					<p>去付款</p>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: '商品购买页面',
				buyModalFlag: false, // 弹出支付模态框
				alipayBuy: 0,
				buyMode: true, // 购买方式，其中true代表使用支付宝，false表示使用微信购买
			}
		},
		methods: {
			beforeEnter(el) {
				// el.style.bottom = '7.86rem';
				el.style.transform = 'translateY(7.86rem)'
			},
			enter(el) {
				el.offsetWidth
				el.style.transform = 'translateY(0rem)'
				el.style.transition = 'all .3s ease'
			},
			beforeLeave(el) {
				el.style.transform = 'translateY(7.86rem)'
				el.style.transition = 'all .3s ease'
			},
			// 关闭支付模态框
			close () {
				this.buyModalFlag = false
			},
			// 支付宝支付时
			alipayBuyFunc() {
				this.buyMode = true
			},
			// 微信支付时
			wechatBuy() {
				this.buyMode = false
			}
		},
		watch: {

		},
	}
</script>

<style scoped="scoped" lang="less">
	@moneyColor: #D0021B;
	@buyColor: #218BFB;

	.container {
		.container-header {
			padding: .3rem;
			background: #fff;

			div:first-child {
				display: flex;
				align-items: center;
				color: #4A4A4A;

				img {
					width: .5rem;
					margin-right: .3rem;
				}

				div:nth-of-type(1) {
					p {
						span:nth-of-type(1) {
							color: #9B9B9B;
						}
					}

					p:first-child {
						margin-bottom: .2rem;

						span:nth-of-type(2) {
							margin: 0 .3rem;
						}
					}
				}
			}
		}

		.container-content {
			background: #fff;
			padding: .3rem;
			display: flex;

			img {
				width: 2.2rem;
				margin-right: .28rem;
			}

			div:nth-of-type(2) {
				p:first-child {
					color: #4A4A4A;
					margin-bottom: .3rem;
				}

				p:nth-child(2) {
					color: @moneyColor;

					span:first-child {
						font-size: 14px;
					}

					span:last-child {
						font-size: 18px;
					}
				}
			}
		}

		.shop-buy-foot {
			position: fixed;
			bottom: 0;
			width: 100vw;
			height: 1rem;
			background: #fff;
			box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.03);
			display: flex;

			div:first-child {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: .3rem;
				font-size: 14px;

				span:first-child {
					color: #9B9B9B;
				}

				span:nth-child(2) {
					color: @moneyColor;
				}

				span:nth-child(3) {
					font-size: 18px;
					color: @moneyColor;
				}
			}

			div:last-child {
				width: 2.6rem;
				height: 1rem;
				display: flex;
				justify-content: center;
				align-items: center;
				background-image: linear-gradient(-119deg, #3AB8FF 0%, #218BFB 100%);
				color: #FFFFFF;
			}
		}
	}

	.mask {
		position: fixed;
		top: 0;
		background: #000;
		opacity: .30;
		width: 100vw;
		height: 100vh;
	}

	.foot-buy-modal {
		height: 7.86rem;
		width: 100vw;
		background: #fff;
		position: fixed;
		display: flex;
		flex-direction: column;
		bottom: 0rem;
		z-index: 9999999;
	}

	.header-modal {
		height: 1rem;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: .01rem solid #F6F6F6;
		font-size: 17px;

		.time {
			color: #218BFB;
		}
	}

	.close {
		width: .34rem;
		position: absolute;
		top: .3rem;
		left: .3rem;
	}

	.pay-buy {
		width: 100%;
	}

	.alipay-buy {
		display: flex;
		align-items: center;
		padding: .3rem;

		.buy-select {
			width: .36rem;
			height: .36rem;
			border: .02rem solid #218BFB;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		img {
			width: .5rem;
			margin: 0 .2rem;

		}
	}

	.buy-select::after {
		content: "";
		background: @buyColor;
		display: inline-block;
		width: .24rem;
		height: .24rem;
		border-radius: 50%;
	}

	.buy-no-select {
		width: .36rem;
		height: .36rem;
		border: .02rem solid #9B9B9B;
		border-radius: 50%;
	}

	.go-buy {
		display: flex;
		flex-direction: column;
		align-items: center;

		p:first-child {
			display: flex;
			padding: .3rem;
			justify-content: center;

			span:first-child {
				font-size: 14px;
				color: #4A4A4A;
			}

			span:nth-child(2) {
				color: @moneyColor;
			}

			span:last-child {
				font-size: 18px;
				color: @moneyColor;
			}
		}

		p:last-child {
			width: 6.9rem;
			height: 1rem;
			background-image: linear-gradient(-119deg, #3AB8FF 0%, #218BFB 100%);
			border-radius: 5px;
			display: flex;
			align-items: center;
			color: #fff;
			justify-content: center;
		}
	}
</style>
